import { Link, useHistory } from 'react-router-dom'

import Icon from '@/components/icon'
import styles from './index.module.scss'
// import { useEffect } from 'react'
// import { useDispatch, useSelector } from 'react-redux'
import { getUser } from '@/store/actions/profile'
import { useInitialState } from '@/utils/hooks'
// import { RootState } from '@/types/store'

const Profile = () => {
  const history = useHistory()
  // const dispatch = useDispatch()
  // const { user } = useSelector((state: RootState) => state.profile)
  // useEffect(() => {
  //   dispatch(getUser())
  // }, [dispatch])
  const { user } = useInitialState(getUser, 'profile')
  return (
    <div className={styles.root}>
      <div className='profile'>
        {/* 个人信息 */}
        <div className='user-info'>
          <div className='avatar'>
            <img src={user.photo} alt='' />
          </div>
          <div className='user-name'>{user.name}</div>
          <Link to='/profile/edit'>
            個人信息 <Icon type='iconbtn_right' />
          </Link>
        </div>

        {/* 今日阅读 */}
        <div className='read-info'>
          <Icon type='iconbtn_readingtime' />
          今日閱讀
          <span>10</span>
          分鐘
        </div>

        {/* 动态 - 对应的这一行 */}
        <div className='count-list'>
          <div className='count-item'>
            <p>{user.art_count}</p>
            <p>動態</p>
          </div>
          <div className='count-item'>
            <p>{user.follow_count}</p>
            <p>關注</p>
          </div>
          <div className='count-item'>
            <p>{user.fans_count}</p>
            <p>粉絲</p>
          </div>
          <div className='count-item'>
            <p>{user.like_count}</p>
            <p>被讚</p>
          </div>
        </div>

        {/* 消息通知 - 对应的这一行 */}
        <div className='user-links'>
          <div className='link-item'>
            <Icon type='iconbtn_mymessages' />
            <div>消息通知</div>
          </div>
          <div className='link-item'>
            <Icon type='iconbtn_mycollect' />
            <div>收藏</div>
          </div>
          <div className='link-item'>
            <Icon type='iconbtn_history1' />
            <div>瀏覽歷史</div>
          </div>
          <div className='link-item'>
            <Icon type='iconbtn_myworks' />
            <div>我的作品</div>
          </div>
        </div>
      </div>

      {/* 更多服务 */}
      <div className='more-service'>
        <h3>更多服務</h3>
        <div className='service-list'>
          <div className='service-item'>
            <Icon type='iconbtn_feedback' />
            <div>用戶反饋</div>
          </div>
          <div className='service-item' onClick={() => history.push('/chat')}>
            <Icon type='iconbtn_xiaozhitongxue' />
            <div>小智同學</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Profile
